<template>
  <div class="page-continue">
    <div class="el-line">
      选择分类：
      <el-cascader :options="tags" v-model="typeSelect"></el-cascader>
    </div>
    <div class="el-line">
      标题：
      <el-input v-model="title"></el-input>
    </div>
    <div class="el-line">
      <Editor class="editor" v-model="text"></Editor>
    </div>
    <div class="el-line button-line">
      <el-button @click="back">取消</el-button>
      <el-button @click="update">提交</el-button>
    </div>
  </div>
</template>

<script>
import typeApi from "@/assets/api/type.js";
import userApi from "@/assets/api/user.js";
import noteApi from "@/assets/api/note.js";
import Editor from "@/components/Editor.vue";
export default {
  data() {
    return {
      title: null,
      text: "",
      typeSelect: null,
      tags: []
    };
  },
  components: {
    Editor
  },
  mounted() {
    typeApi.getType().then(res => {
      var list = res.data.tags;
      list.forEach(val => {
        var children = [];
        val.typeSends.forEach(val2 => {
          children.push({
            value: val2.typeId,
            label: val2.typeName
          });
        });
        this.tags.push({
          value: val.tagsId,
          label: val.tagsName,
          children: children
        });
      });
    });
    userApi.statue().then(res => {
      if (res.data.success == 0) {
        this.$message({
          type: "warning",
          message: "请先登陆"
        });
        setTimeout(() => {
          location.href = "/#/user/login";
        }, 1000);
      }
    });
  },
  methods: {
    update() {
      if (this.typeSelect == null) {
        this.$message({
          message: "请选择分类",
          type: "warning"
        });
        return;
      }
      if (this.title == null || this.title.length < 5) {
        this.$message({
          message: "标题过短",
          type: "warning"
        });
        return;
      }
      noteApi.createNote(this.text, this.title, this.typeSelect[1]).then(res => {
        if (res.data.success == 1) {
          this.$message({
            message: "成功",
            type: "success"
          });
          setTimeout(() => {
            this.$router.go(-1);
          }, 1000);
        } else {
          this.$message.error(res.data.message);
          return;
        }
      });
    },
    back() {
      this.$router.go(-1);
    }
  }
};
</script>

<style lang="scss" scoped>
.editor {
  margin-bottom: 70px;
}
.el-line {
  margin: 20px 0;
}
.button-line {
  text-align: right;
}
</style>
